<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <title>智能云柜测试</title>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript" src="js/element-ui.js"></script>
  <script type="text/javascript" src="js/axios.min.js"></script>
  <script type="text/javascript" src="js/api.js"></script>
  <script type="text/javascript" src="js/socket.io.js"></script>
  <link href="css/element-ui.css" rel="stylesheet">
  <style>
    body {
      margin: 0;
    }

    #app {
      width: 100vw;
      height: 100vh;
      overflow: auto;
    }

    .box-list {
      display: grid;
      grid-auto-flow: column;
      grid-template-rows: repeat(13, 40px);
      grid-template-columns: repeat(2, 80px);
      grid-column-gap: 10px;
      grid-row-gap: 5px;
    }

    .box-list .box-item {
      background-color: #3a8ee6;
      text-align: center;
      line-height: 40px;
      cursor: default;
    }

    .box-item {
      display: grid;
      grid-template-columns: 40px 2fr;
    }

    .box-item .item {
      background-color: orange;
    }

    .box-item .item.door {
      background-color: #75e70c;
    }

    .box-item .item.open {
      background-color: orange;
      animation: fade 50ms infinite;
    }

    @keyframes fade {
      0% {
        background-color: orange;
      }

      50% {
        background-color: #75e70c;
      }
    }
  </style>
</head>
<body>
<div id="app">
  <el-button type="primary" @click="printTestData">打印测试数据</el-button>
  <el-button type="primary" @click="openAllDoor">打开所有柜门</el-button>
  <el-button type="primary" @click="turnOffAllLight">关闭所有灯</el-button>
  <el-button type="primary" @click="turnOnAllLight">打开所有灯</el-button>
  <div class="box-list">
    <div class="box-item"
         v-for="item in boxList">
      {{item.SKBBH}}-{{item.SKBH}}
      <div class="item door" @click="handleClickDoor(item)" :class="{open:item.openDoor}">门</div>
    </div>

  </div>
</div>
</body>
<script>

  new Vue({
    el: "#app",
    data() {
      return {
        addr: 0,
        boxNum: 0,
        boxList: [],
        ws: null
      }
    },
    async mounted() {
      // let res = await $api.getCabinet({zngbh: '150100_00'})
      // this.boxList = res.Grids.map(item => {
      //   return {
      //     ...item,
      //     openDoor: false,
      //     openLight: false,
      //   }
      // })
      for (let i = 1; i <= 26; i++) {
        this.boxList.push({
          SKBBH: 0,
          SKBH: i,
          BH: i,
          openDoor: false
        })
      }
      this.ws = new WebSocket("ws://127.0.0.1:8099/webSocket/132")
      this.ws.onopen = () => {
        console.log("链接了")
        this.initStatus()
      }
      this.ws.onclose = () => {
        console.log("断开了")
      }
      this.ws.onerror = () => {
        console.log("错误了")
      }
      this.ws.onmessage = async e => {
        // L(00,17,1)E
        let msg = e.data
        console.log("收到消息", msg)
        if (/(L)\((\d+),(\d+),(\d+)\)/.test(msg)) {
          let type = RegExp.$1
          let addr = RegExp.$2
          let boxNum = RegExp.$3
          let status = RegExp.$4
          if (type === 'L') {
            // 锁
            let item = this.boxList.find(_ => _.SKBH == boxNum && _.SKBBH == addr)
            if (item) {
              if (status == 1) {
                item.openDoor = true
                this.send(`O(${addr},${boxNum},2)E`)
              } else {
                item.openDoor = false
                // 从数据库查询格子内是否有物品，有的话亮灯，反之则关灯
                // 亮灯 send(`O(${addr},${boxNum},1)E`)
                // 关灯 send(`O(${addr},${boxNum},0)E`)
                let res
                try {
                  // res = await $api.getGridByGzid({gzid: item.GZID})
                } catch (e) {
                  console.error("接口调用异常")
                }
                if (res && res.YSY === 'Y') {
                  this.send(`O(${addr},${boxNum},1)E`)
                } else {
                  this.send(`O(${addr},${boxNum},0)E`)
                }
              }
            }
          }

        }
      }
    },
    methods: {
      async initStatus() {
        for (const item of this.boxList) {
          let addr = item.SKBBH
          if (addr < 10) {
            addr = `0${addr}`
          }
          let num = item.SKBH
          if (num < 10) {
            num = `0${num}`
          }
          this.send(`L(${addr},${num},I)E`)
          // await this.sleep(500)
        }
      },
      async sleep(time) {
        return new Promise((resolve, reject) => {
          setTimeout(resolve, time)
        })
      },
      async handleClickDoor(item) {
        let addr = item.SKBBH
        if (addr < 10) {
          addr = `0${addr}`
        }
        let num = item.SKBH
        if (num < 10) {
          num = `0${num}`
        }
        this.send(`L(${addr},${num},1)E`)
      },
      async handleTurnOnAllLight(item) {
        let addr = item.SKBBH
        if (addr < 10) {
          addr = `0${addr}`
        }
        let num = item.SKBH
        if (num < 10) {
          num = `0${num}`
        }
        this.send(`O(${addr},${num},1)E`)
      },
      async handleTurnOffAllLight(item) {
        let addr = item.SKBBH
        if (addr < 10) {
          addr = `0${addr}`
        }
        let num = item.SKBH
        if (num < 10) {
          num = `0${num}`
        }
        this.send(`O(${addr},${num},0)E`)
      },
      send(msg) {
        console.log("发送串口命令", msg)
        this.ws.send(JSON.stringify({
          type: 'send',
          data: msg
        }))
      },
      printTestData() {
        this.ws.send(JSON.stringify({
          type: 'print',
          data: "这个是第1行数据：12345abcdefg\n这个是第2行数据：12345abcdefg\n这个是第3行数据：12345abcdefg\n这个是第4行数据：12345abcdefg"
        }))
      },
      openAllDoor() {
        for (const item of this.boxList) {
          this.handleClickDoor(item)
        }
      },
      turnOffAllLight() {
        for (const item of this.boxList) {
          this.handleTurnOffAllLight(item)
        }
      },
      turnOnAllLight() {
        for (const item of this.boxList) {
          this.handleTurnOnAllLight(item)
        }
      },
    }
  })
</script>
</html>
